<template>
	<view class="wap">
		<view class="title">
			<image :src="require('./static/img/molly.png')" mode=""></image>
		</view>
		<view class="content">
			<view class="iphone">
				<image :src="require('./static/img/iphone.png')" mode=""></image>
				<input type="text" placeholder="请填写手机号码" />
			</view>
			<view class="bianxie">
				<image :src="require('./static/img/bianxie.png')" mode=""></image>
				<view class="validation">
					<input type="text" placeholder="请填写验证码" />
					<button type="default" plain="true">获取验证码</button>
				</view>	
			</view>
			<view class="footer">
				<text>登录遇到问题？</text>
				<text>密码登录</text>
			</view>
		</view>
		
		<view class="cofim">
            <button type="default" @click="btn">同意协议并登录</button>
            <view>登录注册代表同意<text>用户协议</text>、<text>隐私政策</text></view>
		</view>
		
		
		<view class="footer">
			<view>—— 其他方式登录 ——</view>
			<view class="way">
				<image :src="require('./static/img/wx.png')" mode=""></image>
				<image :src="require('./static/img/qq.png')" mode=""></image>
				<image :src="require('./static/img/wb.png')" mode=""></image>
				<image :src="require('./static/img/ios.png')" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.wap{
	padding: 80rpx 64rpx;
	border-top: 1rpx  solid rgba(0,0,0,0.1);
	.title{
		width: 400rpx;
		height: 154rpx;
		margin: 0 auto;
		margin-bottom: 128rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.content{
		.iphone{
			display:flex;
			height: 60rpx;
			align-items: center;
			margin-bottom: 64rpx;
			image{
				width: 40rpx;
				height: 40rpx;
				margin-right: 4rpx;
			}
			input{
				height: 100%;
				width:calc(100% - 40rpx) ;
				border-bottom: 1px solid #F3F3F3;
			}
		}
		.bianxie{
			display: flex;
			align-items: center;
			height: 80rpx;
			margin-bottom: 16rpx;
			image{
				width: 40rpx;
				height: 40rpx;
				margin-right: 4rpx;
			}
			.validation{
				border-bottom: 1px solid #F3F3F3;
				display:flex;
				align-items:center;
				width:calc(100% - 44rpx) ;
				justify-content:space-between;
				input{
					
				}
				button{
					width: 192rpx;
					line-height: 64rpx;
					height: 64rpx;
					border: 2rpx solid #FEDD12;
					color: #FEDD12;
					font-size: 24rpx;
					margin: 0;
					margin-bottom: 8rpx;
				}
			}
		}
		.footer{
			width: 100%;
			display:flex;
			justify-content: space-between;
			font-size: 24rpx;
			font-weight: 400;
		}
	}
	.cofim{
		margin: 0 auto;
		text-align:center;
		margin-top: 128rpx;
		margin-bottom: 208rpx;
		button{
			width: 560rpx;
			line-height: 88rpx;
			text-align: center;
			border-radius: 44rpx;
			background: #FEDD12;
			font-weight: bold;
			margin-bottom: 32rpx;
		}
		view{
			font-size: 20rpx;
			font-weight: 400;
			text{
				color: #FEDD12;
			}
		}	
	}
	.footer{
		width: 480rpx;
		margin: 0 auto;
		text-align: center;
		view{
			font-size: 24rpx;
			color: #999999;
			font-weight: 400;
			margin-bottom: 28rpx;
		}
		.way{
			display:flex;
			justify-content: space-between;
			image{
				width: 48rpx;
				height: 48rpx;
			}
		}
	}
}
</style>
